<template>
	<div class="bootom-bar">
		<ul class="flex tabbar">
			 <li v-for="(item,index) in tabBars" @click="activeBar(index,item.path)" :key="index"> 
					<span><img :src="index==code?item.activIcon:item.noicon" /></span>
					<span :class="{'active':index==code}">{{item.Text}}</span>
			 </li> 
		</ul>
	</div>
</template>
<script>
export default {
	name:'tabBar',
	data(){
		return{
			active:'active',
			activeIndex:0,
			tabBars:[
				{
					Text:'首页 ',
					isActive:false,
					path:"./",
					noicon:require("../../assets/icon/iconBoth/shouye1.png"),
					activIcon:require("../../assets/icon/iconBoth/shouye.png"),
				},
				{
					Text:'vue',
					isActive:false,
					path:"/vuejs",
					noicon:require("../../assets/icon/iconBoth/vuejs1.png"),
					activIcon:require("../../assets/icon/iconBoth/vuejs.png"),
				},
				{
					Text:'Baidu',
					isActive:false,
					path:"./baidu",
					noicon:require("../../assets/icon/iconBoth/baidu1.png"),
					activIcon:require("../../assets/icon/iconBoth/baidu.png"),
				},
				{
					Text:'git',
					isActive:false,
					path:"./git",
					noicon:require("../../assets/icon/iconBoth/gitfill1.png"),
					activIcon:require("../../assets/icon/iconBoth/gitfill.png"),
				},
				{
					Text:'node',
					isActive:false,
					path:"./node",
					noicon:require("../../assets/icon/iconBoth/node1.png"),
					activIcon:require("../../assets/icon/iconBoth/node.png"),
				},
		
			]
		}
	},
	props:['code'],
	methods:{
		activeBar(event,path){
			console.log(event)
			console.log(this.code)
			this.activeIndex=event;
			this.tabBars[event].isActive=true
			this.$router.push(path);
		}
	}
}
</script>
<style scoped>
.bootom-bar{
	height:98px;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	background:#fff;
	z-index: 9
}
.flex{
	display:flex
}
.flex li{
	flex-grow: 1
}
.tabbar li{
	flex-grow:1;
	text-align: center;
	line-height: 20px;
}
.tabbar{
	border-top:1px solid #ccc;
	padding:10px 0 3px 0;
}
.tabbar span{
	display:block;
	font-size:12px;
	line-height:30px
}
.active{
	color:#1296db
}
.tabbar img{
	width:25%;	
}
</style>